<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习中心 - 启智全景学云汇</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1e88e5;
            --primary-gradient: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
            --accent-color: #43a047;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --bg-light: #f9fafb;
            --bg-white: #ffffff;
            --border-color: #e5e7eb;
            --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            --hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Inter', 'PingFang SC', sans-serif;
        }
        
        body {
            background-color: var(--bg-light);
            color: var(--text-primary);
            line-height: 1.6;
        }
        
        /* 头部样式 */
        .header {
            background: var(--primary-gradient);
            color: white;
            padding: 40px 0;
            position: relative;
            overflow: hidden;
        }
        
        .header::before {
            content: '';
            position: absolute;
            top: -100%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
            transform: rotate(30deg);
            pointer-events: none;
        }
        
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 2;
        }
        
        .logo-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .logo {
            font-size: 2.5rem;
            margin-right: 20px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            color: white;
            width: 70px;
            height: 70px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
        }
        
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
            font-weight: 300;
        }
        
        /* 导航样式 */
        .nav-container {
            background-color: var(--bg-white);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 100;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }
        
        .nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            height: 70px;
        }
        
        .nav-links {
            display: flex;
            align-items: center;
        }
        
        .nav-links a {
            color: var(--text-primary);
            text-decoration: none;
            padding: 22px 20px;
            font-weight: 500;
            transition: var(--transition);
            position: relative;
            font-size: 0.95rem;
        }
        
        .nav-links a:hover, .nav-links a.active {
            color: var(--primary-color);
        }
        
        .nav-links a.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20px;
            right: 20px;
            height: 3px;
            background: var(--primary-gradient);
            border-radius: 3px 3px 0 0;
        }
        
        .search-container {
            display: flex;
            align-items: center;
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            padding: 12px 45px 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            font-size: 0.9rem;
            width: 280px;
            transition: var(--transition);
            background-color: var(--bg-light);
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
            background-color: var(--bg-white);
        }
        
        .search-icon {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-secondary);
        }
        
        /* 主内容区样式 */
        .main-content {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 30px;
        }
        
        /* 面包屑导航 */
        .breadcrumb {
            padding: 15px 0;
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 20px;
        }
        
        .breadcrumb a {
            color: var(--primary-color);
            text-decoration: none;
        }
        
        .breadcrumb a:hover {
            text-decoration: underline;
        }
        
        .breadcrumb span {
            margin: 0 8px;
            color: #ccc;
        }
        
        /* 卡片样式 */
        .card {
            background-color: var(--bg-white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            margin-bottom: 25px;
            border: 1px solid var(--border-color);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: var(--hover-shadow);
        }
        
        .card-header {
            padding: 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-header h2 {
            font-size: 1.4rem;
            color: var(--text-primary);
            font-weight: 600;
        }
        
        .card-body {
            padding: 24px;
        }
        
        /* 学习标签页 */
        .learning-tabs {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: 25px;
            flex-wrap: wrap;
        }
        
        .learning-tab {
            padding: 15px 30px;
            cursor: pointer;
            font-weight: 500;
            color: var(--text-secondary);
            transition: var(--transition);
            position: relative;
        }
        
        .learning-tab.active {
            color: var(--primary-color);
        }
        
        .learning-tab.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--primary-gradient);
            border-radius: 3px 3px 0 0;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        /* 课程卡片样式 */
        .course-card {
            display: flex;
            margin-bottom: 25px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            background: var(--bg-white);
            border: 1px solid var(--border-color);
        }
        
        .course-card:hover {
            box-shadow: var(--hover-shadow);
            transform: translateY(-3px);
        }
        
        .course-image {
            width: 240px;
            min-height: 160px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #777;
            position: relative;
            overflow: hidden;
        }
        
        .course-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .course-category {
            position: absolute;
            top: 15px;
            left: 15px;
            background: var(--primary-gradient);
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .course-content {
            flex: 1;
            padding: 24px;
        }
        
        .course-content h3 {
            font-size: 1.3rem;
            margin-bottom: 12px;
            color: var(--text-primary);
            font-weight: 600;
            line-height: 1.4;
        }
        
        .course-meta {
            display: flex;
            gap: 20px;
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 15px;
        }
        
        .course-meta span {
            display: flex;
            align-items: center;
        }
        
        .course-meta i {
            margin-right: 8px;
        }
        
        .course-description {
            font-size: 0.95rem;
            margin-bottom: 20px;
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            background: var(--primary-gradient);
            color: white;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            box-shadow: 0 4px 6px rgba(30, 136, 229, 0.2);
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(30, 136, 229, 0.3);
        }
        
        .btn-outline {
            background: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            box-shadow: none;
        }
        
        .btn-outline:hover {
            background: rgba(30, 136, 229, 0.05);
            box-shadow: 0 4px 12px rgba(30, 136, 229, 0.1);
        }
        
        /* 进度条样式 */
        .progress-container {
            margin-bottom: 15px;
        }
        
        .progress-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            font-size: 0.9rem;
        }
        
        .progress-bar {
            height: 8px;
            background-color: #eee;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: var(--primary-gradient);
            border-radius: 4px;
            width: 75%;
        }
        
        /* 学习资源卡片样式 */
        .resource-card {
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 25px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            background: var(--bg-white);
            border: 1px solid var(--border-color);
        }
        
        .resource-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--hover-shadow);
        }
        
        .resource-icon {
            width: 100%;
            height: 120px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
            font-size: 2.5rem;
        }
        
        .resource-content {
            padding: 20px;
        }
        
        .resource-content h3 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            color: var(--text-primary);
            font-weight: 600;
        }
        
        .resource-meta {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 15px;
        }
        
        /* 侧边栏样式 */
        .sidebar-widget {
            margin-bottom: 30px;
        }
        
        .widget-title {
            font-size: 1.2rem;
            color: var(--text-primary);
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--border-color);
            position: relative;
            font-weight: 600;
        }
        
        .widget-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 50px;
            height: 2px;
            background: var(--primary-gradient);
        }
        
        /* 我的课程样式 */
        .my-courses {
            list-style: none;
        }
        
        .my-courses li {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .my-courses li:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .my-courses a {
            display: flex;
            text-decoration: none;
            color: var(--text-primary);
            transition: var(--transition);
        }
        
        .my-courses a:hover {
            color: var(--primary-color);
        }
        
        .course-thumb {
            width: 80px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 15px;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #777;
            font-size: 0.8rem;
        }
        
        .course-info {
            flex: 1;
        }
        
        .course-info h4 {
            font-size: 0.95rem;
            margin-bottom: 5px;
            line-height: 1.4;
        }
        
        .course-progress {
            width: 100%;
            height: 4px;
            background-color: #eee;
            border-radius: 2px;
            margin-top: 5px;
        }
        
        .course-progress-fill {
            height: 100%;
            background: var(--primary-gradient);
            border-radius: 2px;
            width: 65%;
        }
        
        /* 学习统计 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .stat-card {
            background-color: var(--bg-white);
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            border: 1px solid var(--border-color);
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        /* 底部样式 */
        .footer {
            background-color: #111827;
            color: white;
            padding: 60px 0 30px;
            margin-top: 80px;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
        }
        
        .footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 15px;
            font-weight: 600;
        }
        
        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--primary-gradient);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 15px;
        }
        
        .footer-links a {
            color: #d1d5db;
            text-decoration: none;
            transition: var(--transition);
            font-size: 0.95rem;
        }
        
        .footer-links a:hover {
            color: white;
            padding-left: 8px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            color: white;
            transition: var(--transition);
        }
        
        .social-links a:hover {
            background: var(--primary-gradient);
            transform: translateY(-3px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 40px;
            margin-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 0.9rem;
            color: #9ca3af;
        }
        
        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .main-content {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .course-card {
                flex-direction: column;
            }
            
            .course-image {
                width: 100%;
                height: 200px;
            }
        }
        
        @media (max-width: 768px) {
            .nav {
                flex-direction: column;
                height: auto;
                padding: 15px 20px;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
                margin-bottom: 15px;
            }
            
            .nav-links a {
                padding: 12px 15px;
            }
            
            .search-input {
                width: 100%;
            }
            
            .learning-tabs {
                flex-direction: column;
            }
            
            .learning-tab {
                padding: 12px 20px;
            }
            
            .footer-content {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <header class="header">
        <div class="header-content">
            <div class="logo-container">
                <div class="logo">
                    <i class="fas fa-book-open"></i>
                </div>
                <div>
                    <h1>启智全景学云汇</h1>
                    <p>学径导航，知心学伴</p>
                </div>
            </div>
        </div>
    </header>
    
    <!-- 导航 -->
    <div class="nav-container">
        <div class="nav">
            <div class="nav-links">
                <a href="index.html"><i class="fas fa-home"></i> 首页</a>
                <a href="news.html"><i class="fas fa-newspaper"></i> 新闻资讯</a>
                <a href="sports.html"><i class="fas fa-running"></i> 体育世界</a>
                <a href="entertainment.html"><i class="fas fa-film"></i> 娱乐天地</a>
                <a href="learning.html" class="active"><i class="fas fa-book-open"></i> 学习中心</a>
            </div>
            <div class="search-container">
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="搜索课程、资源...">
                    <div class="search-icon">
                        <i class="fas fa-search"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 面包屑导航 -->
    <div class="header-content">
        <div class="breadcrumb">
            <a href="index.html">首页</a>
            <span>/</span>
            <a href="learning.html">学习中心</a>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content">
        <!-- 左侧内容 -->
        <div class="content-left">
            <div class="card">
                <div class="card-header">
                    <h2>学习中心</h2>
                </div>
                <div class="card-body">
                    <!-- 学习标签页 -->
                    <div class="learning-tabs">
                        <div class="learning-tab active" data-tab="courses">课程中心</div>
                        <div class="learning-tab" data-tab="mycourses">我的课程</div>
                        <div class="learning-tab" data-tab="resources">学习资源</div>
                        <div class="learning-tab" data-tab="community">学习社区</div>
                    </div>
                    
                    <!-- 课程中心标签页 -->
                    <div class="tab-content active" id="courses">
                        <div class="course-card">
                            <div class="course-image">
                                <div class="course-category">编程</div>
                                <i class="fab fa-python fa-3x"></i>
                            </div>
                            <div class="course-content">
                                <h3>Python编程入门</h3>
                                <div class="course-meta">
                                    <span><i class="fas fa-user-tie"></i> 张教授</span>
                                    <span><i class="far fa-clock"></i> 30小时</span>
                                    <span><i class="fas fa-users"></i> 5,243人</span>
                                    <span><i class="fas fa-star"></i> 4.8/5.0</span>
                                </div>
                                <p class="course-description">
                                    本课程适合零基础学习者，从Python基础语法讲起，逐步深入到数据处理和简单项目开发，帮助学员掌握编程基础。
                                </p>
                                <div class="progress-container">
                                    <div class="progress-info">
                                        <span>热门度</span>
                                        <span>92%</span>
                                    </div>
                                    <div class="progress-bar">
                                        <div class="progress-fill" style="width: 92%"></div>
                                    </div>
                                </div>
                                <a href="course-detail.html" class="btn">立即学习</a>
                            </div>
                        </div>
                        
                        <div class="course-card">
                            <div class="course-image">
                                <div class="course-category">语言</div>
                                <i class="fas fa-language fa-3x"></i>
                            </div>
                            <div class="course-content">
                                <h3>商务英语进阶</h3>
                                <div class="course-meta">
                                    <span><i class="fas fa-user-tie"></i> 李老师</span>
                                    <span><i class="far fa-clock"></i> 20小时</span>
                                    <span><i class="fas fa-users"></i> 3,587人</span>
                                    <span><i class="fas fa-star"></i> 4.7/5.0</span>
                                </div>
                                <p class="course-description">
                                    专注于商务场景下的英语应用，包括会议、谈判、邮件写作等实用技能，帮助学员提升职场英语沟通能力。
                                </p>
                                <div class="progress-container">
                                    <div class="progress-info">
                                        <span>热门度</span>
                                        <span>85%</span>
                                    </div>
                                    <div class="progress-bar">
                                        <div class="progress-fill" style="width: 85%"></div>
                                    </div>
                                </div>
                                <a href="course-detail.html" class="btn">立即学习</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 学习资源标签页 -->
                    <div class="tab-content" id="resources">
                        <div class="resource-grid">
                            <div class="resource-card">
                                <div class="resource-icon">
                                    <i class="fas fa-file-pdf fa-3x"></i>
                                </div>
                                <div class="resource-content">
                                    <h3>Python编程电子书合集</h3>
                                    <div class="resource-meta">
                                        <span><i class="fas fa-file"></i> PDF</span>
                                        <span><i class="fas fa-database"></i> 256MB</span>
                                    </div>
                                    <a href="resource-detail.html" class="btn btn-outline">下载资源</a>
                                </div>
                            </div>
                            
                            <div class="resource-card">
                                <div class="resource-icon">
                                    <i class="fas fa-video fa-3x"></i>
                                </div>
                                <div class="resource-content">
                                    <h3>商务英语视频教程</h3>
                                    <div class="resource-meta">
                                        <span><i class="fas fa-film"></i> MP4</span>
                                        <span><i class="far fa-clock"></i> 8小时</span>
                                    </div>
                                    <a href="resource-detail.html" class="btn btn-outline">下载资源</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-widget">
                <h3 class="widget-title">我的学习进度</h3>
                <div class="card">
                    <div class="card-body">
                        <div class="stats-container">
                            <div class="stat-card">
                                <div class="stat-value">12</div>
                                <div class="stat-label">在学课程</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">85%</div>
                                <div class="stat-label">平均进度</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">24</div>
                                <div class="stat-label">已完成</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">92</div>
                                <div class="stat-label">学习小时</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="sidebar-widget">
                <h3 class="widget-title">我的课程</h3>
                <div class="card">
                    <div class="card-body">
                        <ul class="my-courses">
                            <li>
                                <a href="#">
                                    <div class="course-thumb">
                                        <i class="fab fa-python"></i>
                                    </div>
                                    <div class="course-info">
                                        <h4>Python编程入门</h4>
                                        <div class="course-progress">
                                            <div class="course-progress-fill" style="width: 75%"></div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="course-thumb">
                                        <i class="fas fa-language"></i>
                                    </div>
                                    <div class="course-info">
                                        <h4>商务英语进阶</h4>
                                        <div class="course-progress">
                                            <div class="course-progress-fill" style="width: 45%"></div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="course-thumb">
                                        <i class="fas fa-database"></i>
                                    </div>
                                    <div class="course-info">
                                        <h4>数据库原理</h4>
                                        <div class="course-progress">
                                            <div class="course-progress-fill" style="width: 90%"></div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="sidebar-widget">
                <h3 class="widget-title">学习日历</h3>
                <div class="card">
                    <div class="card-body">
                        <div id="learning-calendar">
                            <!-- 日历将通过JavaScript动态生成 -->
                            <div class="calendar-header">
                                <button class="btn btn-outline"><i class="fas fa-chevron-left"></i></button>
                                <span>2023年11月</span>
                                <button class="btn btn-outline"><i class="fas fa-chevron-right"></i></button>
                            </div>
                            <div class="calendar-grid">
                                <!-- 日历内容将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部 -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-column">
                <h3>关于我们</h3>
                <ul class="footer-links">
                    <li><a href="about.html">公司简介</a></li>
                    <li><a href="team.html">团队介绍</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li><a href="join-us.html">加入我们</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3>学习资源</h3>
                <ul class="footer-links">
                    <li><a href="course-catalog.html">课程目录</a></li>
                    <li><a href="learning-paths.html">学习路径</a></li>
                    <li><a href="resource-library.html">资源库</a></li>
                    <li><a href="blog.html">学习博客</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3>帮助中心</h3>
                <ul class="footer-links">
                    <li><a href="faq.html">常见问题</a></li>
                    <li><a href="user-guide.html">使用指南</a></li>
                    <li><a href="technical-support.html">技术支持</a></li>
                    <li><a href="feedback.html">意见反馈</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3>关注我们</h3>
                <p>关注我们的社交媒体，获取最新学习资讯</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
        </div>
        
        <div class="copyright">
            <p>© 2023 启智全景学云汇 - 学径导航，知心学伴</p>
        </div>
    </footer>

    <script>
        // 标签切换功能
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.learning-tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 移除所有active类
                    document.querySelectorAll('.learning-tab').forEach(t => {
                        t.classList.remove('active');
                    });
                    document.querySelectorAll('.tab-content').forEach(c => {
                        c.classList.remove('active');
                    });
                    
                    // 添加active类到当前标签和内容
                    this.classList.add('active');
                    document.getElementById(tabId).classList.add('active');
                });
            });
            
            // 简单日历生成
            function generateCalendar() {
                const now = new Date();
                const year = now.getFullYear();
                const month = now.getMonth();
                const firstDay = new Date(year, month, 1);
                const lastDay = new Date(year, month + 1, 0);
                
                const daysInMonth = lastDay.getDate();
                const startingDay = firstDay.getDay();
                
                const calendarGrid = document.querySelector('.calendar-grid');
                calendarGrid.innerHTML = '';
                
                // 添加星期标题
                const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
                weekdays.forEach(day => {
                    const dayElement = document.createElement('div');
                    dayElement.textContent = day;
                    dayElement.style.fontWeight = 'bold';
                    calendarGrid.appendChild(dayElement);
                });
                
                // 添加空白格子
                for (let i = 0; i < startingDay; i++) {
                    const emptyDay = document.createElement('div');
                    calendarGrid.appendChild(emptyDay);
                }
                
                // 添加日期
                for (let i = 1; i <= daysInMonth; i++) {
                    const dayElement = document.createElement('div');
                    dayElement.textContent = i;
                    
                    // 标记今天
                    if (i === now.getDate() && new Date().getMonth() === month) {
                        dayElement.style.backgroundColor = 'var(--primary-color)';
                        dayElement.style.color = 'white';
                        dayElement.style.borderRadius = '50%';
                        dayElement.style.width = '24px';
                        dayElement.style.height = '24px';
                        dayElement.style.display = 'flex';
                        dayElement.style.alignItems = 'center';
                        dayElement.style.justifyContent = 'center';
                        dayElement.style.margin = '0 auto';
                    }
                    
                    calendarGrid.appendChild(dayElement);
                }
            }
            
            generateCalendar();
        });
    </script>
</body>
</html>
